<template>
  <div class="goods-bar" v-if="content.componentType === 20" :style="{'background-color': content.propMap.backgroundColor, 'background-image': content.propMap.goodsStyle === '14' ? 'url('+ content.propMap.backgroundImg +')' : ''}">
    <div class="goods-card-1" v-if="content.propMap.goodsStyle === '14'">
      <swiper indicator-dots autoplay :interval="3000000" class="swiper">
        <div v-for="(goods, index) in list" :key="index">
          <swiper-item>
            <div class="goods-area flex">
              <div class="goods-item" v-for="(item, itemIndex) in goods" :key="itemIndex" 
                :style="{backgroundColor: content.propMap.goodsBackgroundColor, borderRadius: content.propMap.radius}"
                @click="$pt.navigateTo({url: `/pages/shop/detail/main?goodsId=${item.goodsId}&goodsType=${item.goodsType}`})">
                <div class="width-107 height-110"><img :src="item.imgUrl" alt="" class="width-107 height-110"></div>
                <div class="goods-content">
                  <div class="goods--title__row line-1" :style="{color: content.propMap.goodsTitleColor}">
                    <span v-if="item.specimenPrice === '0.00'" class="goods-tag" :style="{backgroundColor: content.propMap.tagsBackgroundColor, color: content.propMap.tagsColor}">免费寄样</span>
                    {{item.title}}
                  </div>
                  <div class="goods-income" :style="{color: content.propMap.incomeColor}">预计赚{{anchored ? '￥' + item.income : '***'}}</div>
                  <div class="goods-customer-price line-1" :style="{color: content.propMap.fontTitleColor}">观众购买价<span :style="{color: content.propMap.goodsPriceColor}">{{anchored ? '￥' + item.sellPrice : '***'}}</span></div>
                  <div class="v-align-c content-b font-11 font-color-9 mar-t-14" 
                    v-if="(item.tiktokAuthority && item.tiktokGoodsUrl) || (item.quickAuthority && item.quickGoodsUrl) || (item.taobaoAuthority && item.taobaoGoodsUrl)">
                    <span :style="{color: content.propMap.fontTitleColor}">支持</span>
                    <img 
                      :src="fileSpace + '/images/auchor-tiktok-icon.png'" 
                      class="width-14 height-14 radius-4 mar-l-4" 
                      v-if="fileSpace && item.tiktokAuthority && item.tiktokGoodsUrl" alt="" />
                    <img 
                      :src="fileSpace + '/images/auchor-quick-icon.png'" 
                      class="width-14 height-14 radius-4 mar-l-4" 
                      v-if="fileSpace && item.quickAuthority && item.quickGoodsUrl" alt="" />
                    <img 
                      :src="fileSpace + '/images/auchor-taobao-icon.png'" 
                      class="width-14 height-14 radius-4 mar-l-4" 
                      v-if="fileSpace && item.taobaoAuthority && item.taobaoGoodsUrl" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </swiper-item>
        </div>
      </swiper>
    </div>
    <div class="goods-card-2" v-else-if="content.propMap.goodsStyle === '12'">
      <div
        class="goods-item mar-t-10"
        v-for="(item,index) in list"
        :key="index"
        :style="{backgroundColor: content.propMap.backgroundColor, borderRadius: content.propMap.radius}"
        @click="$pt.navigateTo({url: `/pages/shop/detail/main?goodsId=${item.goodsId}&goodsType=${item.goodsType}`})">
        <div class="width-123 height-123">
          <img :src="item.imgUrl + '?imageView2/2/w/250'" v-if="item.imgUrl" alt="" class="width-123 height-123">
        </div>
        <div class="goods-content mar-l-9">
          <div class="goods--title__row line-1" :style="{color:content.propMap.goodsTitleColor}">
            <span v-if="item.specimenPrice === '0.00'" class="goods-tag" :style="{backgroundColor:content.propMap.tagsBackgroundColor, color:content.propMap.tagsColor}">免费寄样</span>
            {{item.title}}
          </div>
          <div class="goods-sell font-11 mar-t-5" :style="{color: content.propMap.goodsBackgroundColor}">
            <span class="font-color-9">已售<span class="color-num">{{item.salesNum}}</span>件</span>
            <div class="dividing mar-l-5 mar-r-5"></div>
            <span class="font-color-6">{{item.anchorSalePeople}}位网红在卖</span>
          </div>
          <div class="height-17 mar-t-3">
            <div class="v-align-c font-11 font-color-9" 
              v-if="item.tiktokAuthority || item.quickAuthority || item.anchorPlatformShopType || item.taobaoAuthority">
              <span :style="{color: content.propMap.goodsBackgroundColor}">支持</span>
              <img 
                v-if="fileSpace && item.tiktokAuthority"
                :src="fileSpace + '/images/anchor-dy-icon.png'" 
                class="width-14 height-14 radius-4 mar-l-4" 
                alt="" />
              <img
                v-if="fileSpace && item.quickAuthority"
                :src="fileSpace + '/images/anchor-ks-icon.png'" 
                class="width-14 height-14 radius-4 mar-l-4" 
                alt="" />
              <img
                v-if="fileSpace && item.anchorPlatformShopType"
                :src="fileSpace + '/images/auchor-wechat-icon.png'" 
                class="width-14 height-14 radius-4 mar-l-4" 
                alt="" />
              <img
                v-if="fileSpace && item.taobaoAuthority"
                :src="fileSpace + '/images/auchor-taobao-icon.png'" 
                class="width-14 height-14 radius-4 mar-l-4" 
                alt="" />
            </div>
          </div>
          <div class="flex flex-between mar-t-5">
            <div :style="{color: content.propMap.incomeColor}">
              <div class="color-num font-11">{{anchored ? '￥' : ''}}<span class="font-16">{{anchored ? item.income : '***'}}</span></div>
              <div class="font-11 mar-t--2">预计赚</div>
            </div>
            <div class="font-color-9">
              <div class="font-16">{{anchored ? item.anchorRatio : '***'}}{{anchored ? '%' : ''}}</div>
              <div class="font-11 mar-t--2" :style="{color: content.propMap.salesNumColor}">佣金比例</div>
            </div>
            <div class="font-color-9">
              <div class=" font-11" :style="{color: content.propMap.goodsPriceColor}">
                {{anchored ? '￥' : ''}}<span class="font-16">{{anchored ? item.sellPrice : '***'}}</span>
              </div>
              <div class="font-11 mar-t--2" :style="{color: content.propMap.salesNumColor}">观众购买价</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    content: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      list: []
    }
  },
  computed: {
    anchored() {
      return this.getCustomerId && this.getAnchorType
    }
  },
  watch: {
    content: {
      deep: true,
      immediate: true,
      handler(newVal) {
        if (newVal.propMap.goodsStyle === '14') {
          this.list = []
          for (let i = 0; i < newVal.list.length; i += 3) {
            this.list.push(newVal.list.slice(i, i + 3))
          }
        } else {
          this.list = newVal.list
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.radius-4{
  border-radius: 4px;
}
// 商品栏样式
.goods-bar {
  padding: 15px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .goods-card-1{
    height: 212px;
    .swiper{
      height: 214px;
      margin-top: 36px;
    }
    /deep/.wx-swiper-dots.wx-swiper-dots-horizontal{
      margin-bottom: -7px;
    }
    /deep/.wx-swiper-dot{
      width: 8px;
      height: 3px;
      border-radius: 2px;
    }
    .goods-area{
      .goods-item{
        width: 107px;
        flex-shrink: 0;
        margin-left: 6px;
        overflow: hidden;
        background-color: white;
        border-radius: 5px;
        &:last-child{
          margin-right: 6px;
        }
        .goods-content{
          padding: 5px 5px;
          line-height: 1;
          height: 82px;
          position: relative;
          box-sizing: border-box;
          .goods--title__row{
            font-size: 12px;
            font-weight: bold;
            height: 12px;
            line-height: 12px;
            .goods-tag{
              color: #F8303D;
              background-color: rgba(248, 48, 61, .1);
              border-radius: 2px;
              font-size: 10px;
              padding: 0px 3px;
              margin-right: 4px;
              height: 12px;
              line-height: 12px;
              display: inline-block;
            }
          }
          .content-b{
            position: absolute;
            left: 5px;
            bottom: 5px;
          }
          .goods-income{
            font-size: 11px;
            color: #F82A37;
            margin-top: 5px;
          }
          .goods-customer-price{
            font-size: 11px;
            color: #999;
            margin-top: 4px;
            height: 11px;
            line-height: 11px;
          }
        }
      }
    }
  }
  .goods-card-2{
    .goods-item{
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      overflow: hidden;
      border-radius: 5px;
      .goods-content{
        flex: 1;
        padding-top: 11px;
        .goods--title__row{
          font-size: 15px;
          font-weight: bold;
          height: 15px;
          line-height: 15px;
          .goods-tag{
            color: #F8303D;
            background-color: rgba(248, 48, 61, .1);
            border-radius: 2px;
            font-size: 11px;
            padding: 0px 3px;
            margin-right: 3px;
            height: 15px;
            line-height: 15px;
            display: inline-block;
          }
        }
        .goods-sell{
          display: flex;
          align-items: center;
          justify-content: flex-start;
          .dividing{
            width: 0.5px;
            height: 10px;
            background-color: #CCCCCC;
          }
        }
        .color-num{
          color: #F8303D;
        }
      }
    }
  }
}
</style>
